<template>
	<view style="width: 100%;">
		<view class="sticky-box" :style="'top:'+(marTop)+'px;'">
			<!-- 			<view id="home" style="justify-content: space-between;padding: 20rpx 30rpx;"
				class="home acea-row row-center-wrapper iconfont icon-xiangzuo h5_back" @tap="returns">
			</view> -->

			<utabsswiper activeColor="#ea5550" ref="tabs1" :list="typeList" :current="currentMain" @change="changeMain"
				:fontSize="28" :barWidth="0" :is-scroll="false" swiperWidth="750"></utabsswiper>
		</view>


		<view style="margin: 20rpx 20rpx;width: calc(100% - 40rpx);">
			<fw-waterfall-flow :value="listData" :gap="20" :columns="columns" :itemBR="12" imageBR="10rpx"
				:key="Math.random()" v-if="showList == true" v-on:clickItem="toWorksDetailItem"
				v-on:clickImage="toWorksDetailImage"></fw-waterfall-flow>
			<view class="mores-txt flex" v-if="hasMore == false">
				<text style="font-size: 26rpx;">已经全部加载完毕</text>
			</view>
		</view>
	</view>
</template>
<script>
	const app = getApp();
	import utabsswiper from '../portraitMaster/backup/h-tabs-swiper.vue';
	import fwWaterfallFlow from './components/pp-waterfall-flow/fw-waterfall-flow.vue';
	import {
		getFwjzType,
		getFwjzByType
	} from '@/api/case.js';
	import {
		addClickRecord,
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'
	import {
		ref
	} from 'process';

	export default {
		components: {
			utabsswiper,
			fwWaterfallFlow
		},
		data() {
			return {
				shareUrl: '',
				commonUrl: 'https://www.mayimae.com/qz/pages/usercase/witness?mainIndex=',
				marTop: 0,
				columns: 2,
				currentMain: 0,
				userId: '-1',
				token: '-1',
				phone: '13012562102',
				scrollTop: 0,
				platform: uni.getSystemInfoSync().platform, //手机类型
				typeList: [],
				page: 1,
				limit: 10,
				listData: [],
				type2: '',
				hasMore: true,
				showList: true,
				sendPage: '29',
			}
		},
		created() {
			let that = this;
		},
		mounted: function() {
			let that = this;

		},
		onPageScroll(res) { //、、、、、
			let that = this;
		},
		onReachBottom() {
			let that = this;
			//console.log('onReachBottom');
		},
		onLoad(options) {
			let that = this;
			that.loginH5();
			let locatiojUrl = window.location.href;


			if (locatiojUrl.indexOf('mainIndex') != -1) {
				//分享出去的页面链接
				that.currentMain = decodeURI(that.jqueryUrl(locatiojUrl).mainIndex);

				that.getShareType();
			} else {
				//正常打开页面
				that.userId = options.userId;
				that.token = options.token;

				that.shareUrl = that.commonUrl + '0';
				that.toNative('29');
				that.getType();
			}
			if (window.webkit) {
				if (that.platform == 'ios') {
					window.webkit.messageHandlers.navTitle.postMessage({
						'name': '服务见证'
					});
				}
			}
			if (that.platform == 'android') {
				window.location.href = 'navTitle&name=' + '服务见证';
			}
		},
		beforeDestroy() {
			uni.$off('pageScroll'); // 避免内存泄漏
		},
		onShow() {
			let that = this;
			console.log('sendPage === ' + that.sendPage)
			console.log('shareUrl === ' + that.shareUrl)
			if (that.shareUrl != '') {
				that.toNative(that.sendPage);
			}
		},
		methods: {
			isBlackApp() {
				var u = navigator.userAgent.toLowerCase();
				return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf(
					'mqqbrowser') > -1;
			},
			getShareType() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				getFwjzType(p).then(res => {
					if (res.code == 0) {
						that.typeList = [];
						that.typeList = res.data;

						that.type2 = that.typeList[that.currentMain].id;
						that.getList();
					}
				})
			},
			toNative(page) {
				let that = this;
				that.sendPage = page;
				// 通过检查window.android和window.webkit属性来判断是否是移动端
				if (window.webkit) {
					if (that.platform == 'ios') {
						if (!that.isBlackApp()) {
							window.webkit.messageHandlers.goShare.postMessage({
								'page': page,
								'shareurl': that.shareUrl
							});
						}
					}
				}
				if (that.platform == 'android') {
					if (!that.isBlackApp()) {
						window.location.href = 'goShare&page=' + page + '&shareurl=' + that.shareUrl;
					}
				}
			},
			jqueryUrl(url) {
				let arr = url.split('?');
				let params = arr[1].split('&');
				let obj = {};
				for (let i = 0; i < params.length; i++) {
					let param = params[i].split('=');
					obj[param[0]] = param[1];
				}
				return obj;
			},
			loginH5() {
				let that = this;
				loginMobile({
						phone: that.phone,
						captcha: '000000',
						spread_spid: 10001
					})
					.then(res => {
						let data = res.data;
						let newTime = Math.round(new Date() / 1000);
						that.$store.commit("LOGIN", {
							'token': res.data.token
						});
						that.$store.commit("SETUID", res.data.uid);

					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			returns() {
				console.log('----!!!  ')
				uni.navigateBack();
			},
			toWorksDetailItem: function(item) {
				//console.log('----!!!  ' + JSON.stringify(item))
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/usercase/witnessdetail?userId=' + that.userId + '&token=' + that.token +
						'&workId=' + item.id,
				})
			},
			toWorksDetailImage: function(item) {
				//console.log('----###  ' + JSON.stringify(item))
				let that = this;
				uni.navigateTo({
					animationType: animationType.type,
					animationDuration: animationType.duration,
					url: '/pages/usercase/witnessdetail?userId=' + that.userId + '&token=' + that.token +
						'&workId=' + item.id,
				})
			},
			getType() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				getFwjzType(p).then(res => {
					if (res.code == 0) {
						that.typeList = [];
						that.typeList = res.data;
						that.type2 = that.typeList[0].id;
						that.getList();
					}
				})
			},
			getList() {
				let that = this;
				let p = {};
				p.userId = that.userId;
				p.token = that.token;
				p.type2 = that.type2;
				p.page = that.page;
				p.limit = that.limit;
				getFwjzByType(p).then(res => {
					if (res.code == 0) {
						let arr = res.data;
						if (arr.length < that.limit) {
							that.hasMore = false;
						}

						if (that.page == 1) {
							that.listData = [];
							that.showList = false;
						}

						if (arr.length > 0) {
							arr.forEach((item, index) => {
								that.listData.push(item)
							});
						}

						that.showList = true;
						//that.$forceUpdate(); // 强制更新

						// that.$nextTick(() => {

						// })

					}
				})
			},
			changeMain(current) {
				let that = this;
				that.$refs.tabs1.setFinishCurrent(current);
				that.currentMain = current;


				if (that.currentMain == 0) {
					that.shareUrl = that.commonUrl + '0';
					that.toNative('29');
				}
				if (that.currentMain == 1) {
					that.shareUrl = that.commonUrl + '1';
					that.toNative('30');
				}
				if (that.currentMain == 2) {
					that.shareUrl = that.commonUrl + '2';
					that.toNative('31');
				}
				if (that.currentMain == 3) {
					that.shareUrl = that.commonUrl + '3';
					that.toNative('32');
				}
				if (that.currentMain == 4) {
					that.shareUrl = that.commonUrl + '4';
					that.toNative('33');
				}

				that.page = 1;
				that.type2 = that.typeList[current].id;

				that.getList();
			},
			transition({
				detail: {
					dx
				}
			}) {
				let that = this;
				this.$refs.tabs.setDx(dx);
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background: white;
	}

	.sticky-box {
		position: sticky;
		top: 0px;
		/* 设定吸顶时的位置 */
		z-index: 999;
		/* 确保元素在顶层 */
		background-color: #fff;
		/* 建议设置背景，防止遮挡下方内容 */
	}

	.mores-txt {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		height: 70rpx;
		color: #999;
		font-size: 24rpx;

		.iconfont {
			margin-top: 2rpx;
			font-size: 24rpx;
		}
	}
</style>